<template>
  <div id="timeline">
    <SwitchYear v-show="years.length > 0" :list="years" :line="false"></SwitchYear>
    <ClickUpload></ClickUpload>
    <MyDialog title="上传文件" v-show="showUpload">
      <Upload></Upload>
    </MyDialog>
    <!--  整体内容  -->
    <div id="full-content" @scroll="scrollHandle($event)">
      <!--  单个内容    -->
      <panel v-for="c in contentList" :key="c.id" :data-day="c.time"
             :content="c" :part="true"></panel>
    </div>
    <BallChain v-if="days.length>0" :list="days" :current-day="scrollCurrent"></BallChain>
    <to-top></to-top>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import SwitchYear from "@/components/switch-year";
import BallChain from "@/components/ball-chain";
import Upload from "@/components/upload";
import {getDayList, getYear} from "@/util/request/content";
import {mapState} from "vuex";
import Panel from "@/views/panel";
import MyDialog from "@/components/my-dialog";
import ToTop from "@/components/to-top";
import ClickUpload from "@/components/click-upload";
import {is_empty} from "@/util/funcutils";

export default {
  name: "timeline",
  components: {ClickUpload, ToTop, MyDialog, Panel, BallChain, SwitchYear, Upload},
  data() {
    return {
      years: [],
      days: [],
      scrollCurrent: '',
      dayTop: null
    }
  },
  mounted() {
    this.initYear()
    this.initList()
    this.$bus.$on('scrollTo', (top) => {
      document.getElementById("full-content").scroll({top, behavior: 'smooth'})
    })
  },
  computed: {
    ...mapState(['selectedYear', 'insertSuccess', 'contentList', 'showUpload']),
  },
  watch: {
    'showUpload'() {
      if (!this.showUpload && this.insertSuccess) {
        this.initYear()
        this.initList()
      }
    },
    selectedYear() {
      this.initList()
    },
    days() {
      this.initDayTop()
    }
  },
  methods: {
    initDayTop() {
      let els = document.getElementById('full-content').children
      this.dayTop = {}
      for (let el of els) {
        this.dayTop[el.dataset['day'].substring(5, 10)] = el.offsetTop
      }
    },
    scrollHandle(e) {
      for (let k of Object.keys(this.dayTop)) {
        if (e.target.scrollTop < this.dayTop[k]) {
          this.scrollCurrent = k
          break
        }
      }
    },
    initYear() {
      getYear()
          .then(res => {
                this.years = res.data.data
                if (is_empty(this.selectedYear)) {
                  this.$store.dispatch('setSelectedYear', this.years[this.years.length - 1])
                }
              }
          )
    },
    initList() {
      getDayList({time: this.selectedYear})
          .then(res => {
            let data = res.data
            this.$store.dispatch('setContentList', [])
            this.days = []
            for (let k in data) {
              this.days.push({day: k, id: data[k][0].id})
              for (let kk in data[k]) {
                this.$store.dispatch('contentListPush', data[k][kk])
              }
            }
          })
    },

  },
}
</script>
<style scoped>
#timeline {
  position: absolute;
  height: 94%;
  width: 90%;
  margin: auto;
  left: 0;
  right: 0;
}

#full-content {
  height: 100%;
  overflow: auto;
  width: 100%;
  padding: 30px;
  border-radius: 10px;
}

#full-content :first-child {
  margin-top: 0;
}

#full-content :last-child {
  margin-bottom: 0;
}
</style>